<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in goodslist" :key="item.id">
            <a href="#">
                <router-link :to="{ name: 'goods_info', params: { id: item.id } }">
                    <img :src="item.image">
                    <h1 class="title">{{ item.name }}</h1>
                    <p class="info">
                        <span class="price">¥{{ item.price }}</span>
                        <span class="sell">剩余 {{ item.num }} 件</span>
                    </p>
                </router-link>


            </a>
        </div>
        <mt-button class="more" v-if="goodslist.length !== 0" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>
  
<script>
export default {

    props: ['category_id'],
    data () {
        return {
            goodslist: [],
            last_id: 0
        }
    },

    created () {
        this.getGoodsList()
    },
    methods: {
        getGoodsList () {
            this.$indicator.open({
                text: '加载中'
            })
            let params = { last_id: this.last_id, category_id: this.category_id }
            this.$http.get('goodslist', { params: params }).then(res => {
                this.$indicator.close()
                if (res.data.code === 1) {
                    if (res.data.data.length > 0) {
                        this.goodslist = this.goodslist.concat(res.data.data)
                        this.last_id = res.data.data[res.data.data.length - 1].id
                    } else if (this.goodslist.length > 0) {
                        this.$toast('已经到达底部')

                    } else {
                        this.$toast('列表为空')
                    }
                }

            })
        }, getMore () {
            this.getGoodsList()
        }


    }
}
</script>
<style lang="scss" scoped>
.goods-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;

    .goods-item {
        width: calc(calc(100% / 2) - 10px);
        margin: 10px 10px 0 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 10px;
        padding: 10px;

        img {
            width: 100%;
        }

        .title {
            font-size: 14px;
            color: #333;
            margin: 10px 0;
        }

        .info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0;

            .price {
                color: red;
                font-weight: bold;
                font-size: 16px;
            }

            .sell {
                font-size: 13px;
            }

            .more {
                margin: 15px 0;
                font-size: 14px;
            }

        }
    }
}
</style>
  